<template>
  <div class="container-xl my-home-div" :style="{ '--bs-gutter-x': 0, '--my-home-div-height': '56px' }">
    <div class="row my-home-div-line ">
      <div class="col">
        <i class="icon  icon-ic_fluent_flag_16_filled"></i> <span>团队比赛列表</span>
      </div>
      <div class="col text-right">
        <router-link v-slot="{ navigate }" custom :to="{
          name: '创建比赛',
          params: { ID: data?.ID },
        }">
          <el-button :style="{
            '--el-button-hover-color': 'var(--color-cheng2)',
          }" v-if="isAdmin" type="primary" size="default" @click="navigate">+ &nbsp; 创建比赛</el-button>
        </router-link>
      </div>
    </div>
    <div v-if="getactivitycount" class="row" :style="{ '--bs-gutter-x': 0 }">
      <div class="col container-fluid" :style="{ paddingLeft: '12px', paddingRight: '12px' }">
        <div class="row"
          :style="{ color: 'var(--color-43)', fontWeight: 700, lineHeight: '48px', height: '48px', borderBottom: '1px solid #C4C4C4' }">
          <div class="col">比赛名</div>
          <div :style="{ width: '120px' }">类型</div>
          <div :style="{ width: '238px' }">比赛时间</div>
          <div :style="{ width: isAdmin ? '120px' : '176px', paddingRight: isAdmin ? '0px' : '48px' }">比赛时长</div>
          <div v-if="isAdmin" :style="{ width: '320px' }">操作</div>
        </div>
        <activityitem v-for="(v, key) in getactivity" :key="key" :activity="v" :isAdmin="!!isAdmin" :teamid="data?.ID"
          :delactivity="delactivity" :checkduplicate="checkduplicate" paddingLeft="calc(var(--bs-gutter-x) * .5)">
        </activityitem>
      </div>
    </div>

    <div class="row" v-if="getactivitycount">
      <div class="col text-right">
        <el-pagination :page-size="limit" :total="getactivitycount" hide-on-single-page @current-change="change"
          layout="prev, pager, next" :current-page="Math.floor(offset / limit) + 1"></el-pagination>
      </div>
    </div>
    <el-empty v-if="!getactivitycount" image="https://cdn.hterobot.com/JOY/oj_1_1/Not%20Found%20illustration.png" />
  </div>
</template>


<script setup lang="ts">
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { badgeType } from "./type";
import { useStore } from "vuex";
import { debounce } from "underscore";
import { Storekey } from "../../../interface";
import { useRoute, useRouter } from "vue-router";
import { computed, onMounted, ref } from "vue";
import activityitem from '../../../components/activity/listmenu.vue'
import { ElMessageBox, ElMessage } from "element-plus";
import { asyncteamcheckduplicate, asyncteamdelactivity, asyncteamselectactivitys } from "../../../api";
const p = defineProps<{
  data?: Studycodemodel.Iteam,
  changeteam?: (str: Studycodemodel.Iteam) => void,
  isAdmin?: 0 | 1 | 2
  user?: Studycodemodel.Iuser
  teamusers?: Studycodemodel.Iteamuser[]
  getUsers?: Function
  badge?: badgeType
}>()

function delactivity(id?: number) {
  if (id) {
    ElMessageBox.confirm("是否删除该选项, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        if (p.data?.ID) {
          await asyncteamdelactivity({ ID: id, teamid: p.data.ID });
        }
        ElMessage({
          type: "success",
          message: "删除成功!",
        });
        start();
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "已取消删除",
        });
      });
  }
}


const store = useStore(Storekey)
const route = useRoute()
const order = computed(() => {
  return route.query.order as string
})

const offset = computed(() => {
  return Number(route.query.offset) || 0
})

const limit = computed(() => {
  return Number(route.query.limit) || 20
})

const getactivity = ref<Studycodemodel.Iactivity[]>([])

const getactivitycount = ref(0)

const debouncet1 = ref(debouncet())

function start() {
  debouncet1.value()
}

onMounted(() => {
  start()
})

const router = useRouter()

function change(r: number) {
  router.push({
    name: "团队比赛",
    query: {
      limit: limit.value,
      order: order.value,
      offset: (r - 1) * limit.value,
    },
  });
}


function debouncet() {
  return debounce(() => {
    asyncteamselectactivitys({
      _offset: offset.value,
      _limit: limit.value,
      teamid: p.data?.ID
    }).then(e => {
      getactivity.value = e.rows
      getactivitycount.value = e.count
    })
  }, 300);
}

function checkduplicate(activityid: number) {
  ElMessageBox.confirm("查重通常将于5-60分钟内完成（取决于参赛人数），可进入比赛数据详情进行查看", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    asyncteamcheckduplicate({ activityid, teamid: p.data?.ID }).then(e => {
      ElMessage.success('查重完成')
    }).catch(e => {
      ElMessage.error(e)
    })
  })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });

}


</script>

<style scoped>
.head1 {
  background: #f6f6f6;
  height: 90px;
  line-height: 90px;
  border-radius: 8px 8px 0px 0px;
  position: relative;
  text-align: center;
}
</style>
